<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:r="http://ricchieri.com/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>


	<ui:composition template="../../templates/commonLayoutReservation.xhtml">
		<ui:define name="title">#{msg.titleReservation}</ui:define>
		<ui:define name="content">
			<h:form id="fixedMultipleReservationForm">
				<p:messages showDetail="false" autoUpdate="true" closable="false" severity="fatal"/> 
				<p:messages showDetail="false" autoUpdate="true" closable="false" severity="info"/> 
				<h2>#{msg.cancelMutipleReservation}</h2> 
				<p:wizard widgetVar="wiz" flowListener="#{addFixedReservationMB.onFlowProcess}" showStepStatus="true" showNavBar="false" step="#{addFixedReservationMB.skipStep()}">
					<p:tab id="travelInformation" title="#{msg.travelInformation}">
						<p:panel> 
		
							<h:panelGrid columns="3">
								<h:outputLabel value="#{msg.tripOrientation}" for="trip"/>
								<p:selectOneMenu value="#{cancelMultipleReservationMB.cancelMultipleReservationBean.selectedTrip}" id="trip">
									<f:selectItem itemLabel="#{msg.all}" itemValue="" />
									<f:selectItems value="#{cancelMultipleReservationMB.trips}" />
								</p:selectOneMenu>
								<p:message id="tripMsg" for="trip" display="icon"/>
							
								<h:outputLabel for="from" value="#{msg.from}" />
					            <p:calendar id="from" pattern="dd/MM/yyyy" value="#{cancelMultipleReservationMB.cancelMultipleReservationBean.startDate}" 
					            	showOn="button" readOnlyInputText="true" required="true" requiredMessage="#{msg.requiredStartDate}"
					            	title="#{component.valid ? '' : cancelMultipleReservationMB.getErrorMessage(component.clientId)}">
									<f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT-3"/>
								</p:calendar>
								<p:message id="fromMsg" for="from" display="icon"/>
					
					            <h:outputLabel for="to" value="#{msg.to}" />
					            <p:calendar id="to" pattern="dd/MM/yyyy" value="#{cancelMultipleReservationMB.cancelMultipleReservationBean.finishDate}" 
					            	showOn="button" readOnlyInputText="true" required="true" requiredMessage="#{msg.requiredFinishDate}"
					            	title="#{component.valid ? '' : cancelMultipleReservationMB.getErrorMessage(component.clientId)}">
									<f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT-3"/>
								</p:calendar>
								<p:message id="toMsg" for="to" display="icon"/>
								
								<h:outputLabel for="to" value="#{msg.daysOfWeek}" />
								<p:selectManyCheckbox value="#{cancelMultipleReservationMB.cancelMultipleReservationBean.selectedDays}" id="daysWeek">  
									<f:selectItems value="#{cancelMultipleReservationMB.daysWeek}" />
						        </p:selectManyCheckbox>
								<p:message id="daysWeekMsg" for="daysWeek" display="icon"/>
								
								<h:outputLabel value="#{msg.eventTime}" />
					            <p:calendar id="time" value="#{cancelMultipleReservationMB.cancelMultipleReservationBean.time}" pattern="HH:mm" timeOnly="true" readOnlyInputText="true"/>
								<p:message id="timeMsg" for="time" display="icon"/>
															
								<h:outputLabel  value="#{msg.reservationType}" for="reservationType"/>
					      	 	<p:selectOneMenu value="#{cancelMultipleReservationMB.cancelMultipleReservationBean.selectedReservationType}" id="reservationType">
									<f:selectItem itemLabel="#{msg.all}" itemValue="" />
									<f:selectItems value="#{cancelMultipleReservationMB.reservationTypes}" />
								</p:selectOneMenu>
								<p:message id="reservationTypeMsg" for="reservationType" display="icon"/>
								
								<h:outputLabel value=""/> 
								<h:outputLabel value="#{msg.noteMultipleCancelation}" style="font-weight:bold"/> 
								<h:outputLabel value=""/> 
								
								<p:separator style="width: 100%; height: 6px"/>
								<p:separator style="width: 100%; height: 6px"/> 
								<h:outputLabel value=""/> 
																
								<h:outputLabel value="#{msg.cancelationType}"/>
					     		<p:selectOneMenu id="cancelationType" value="#{cancelMultipleReservationMB.cancelMultipleReservationBean.selectedCancelationType}">
				                	<f:selectItems value="#{cancelMultipleReservationMB.cancelationTypes}" />   
				            	</p:selectOneMenu> 
				            	<p:message id="cancelationTypeMsg" for="cancelationType"/>
				            	
								<h:outputLabel for="description" value="#{msg.cancelationDescription}" />
								<p:inputTextarea rows="12" style="width:99%" id="description" value="#{cancelMultipleReservationMB.cancelMultipleReservationBean.cancelationDescription}" 
									required="true"
									requiredMessage="#{msg.requiredDescription}" 
									title="#{component.valid ? '' : cancelMultipleReservationMB.getErrorMessage(component.clientId)}"
									maxlength="255" autoResize="false"/>
								<p:message id="descriptionMsg" for="description"/>				
								
								<h:outputText value="#{msg.blockUser}" />
								<p:selectBooleanCheckbox  value="#{cancelMultipleReservationMB.cancelMultipleReservationBean.block}" id="blockUser"/>  					
								<p:message id="blockUserMsg" for="blockUser"/>
								
								<h:outputText value="#{msg.blockMotive}" />   
						       	<p:inputTextarea rows="7" style="width:98%" id="blockMotive" columns="30"
							       autoResize="false" value="#{cancelMultipleReservationMB.cancelMultipleReservationBean.blockMotive}"
							       title="#{component.valid ? '' : cancelMultipleReservationMB.getErrorMessage(component.clientId)}"
							       maxlength="100"/>
						       	<p:message id="blockMotiveMsg" for="blockMotive"/>	
								
							</h:panelGrid>
						</p:panel>
						<div style="text-align:right; margin-top:10px">
							<div style="display: inline;">	
								<p:commandLink update="@form" oncomplete="handleRequestTravelInformation(xhr, status, args);" styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-action" action="#{cancelMultipleReservationMB.validateTravelInformation}">
									<span class="ui-button-text ui-c">#{msg.next}<r:space/><r:space/><i class="icon-arrow-right"></i></span>
								</p:commandLink>
							</div>
						</div>
						
						<script type="text/javascript">
							function handleRequestTravelInformation(xhr, status, args) {
						        if(args.validationFailed || !args.isValid) {
									return;
						        } else {
						        	wiz.next();
						        }
						    }
						</script>
						
					</p:tab>
					<p:tab id="user" title="#{msg.pax}">
					
						<p:panel> 
					     	<h:panelGrid columns="2">
					     		<h:outputLabel value="#{msg.first_name}" />
					     		<p:inputText value="#{cancelMultipleReservationMB.userFilter.firstName}"/>
					     		
					     		<h:outputLabel value="#{msg.last_name}" />  
							    <p:inputText value="#{cancelMultipleReservationMB.userFilter.lastName}" />
					            
					            <h:outputLabel value="#{msg.documentType}"/>
					     		<p:selectOneMenu value="#{cancelMultipleReservationMB.userFilter.documentType}">
					                <f:selectItems value="#{cancelMultipleReservationMB.documents}" />   
					            </p:selectOneMenu> 
					            
					     		<h:outputLabel value="#{msg.documentNum}" />
							    <p:inputText value="#{cancelMultipleReservationMB.userFilter.dni}" onkeypress="javascript:return isAlphanumericKey(event);"/>
					            
							</h:panelGrid>
							<h:panelGrid columns="2" style="margin-top:10px; text-align:center">
				     			<r:commandLinkCustom id="reset" action="#{cancelMultipleReservationMB}" method="reset" icon="icon-eraser" message="#{msg.resetButton}"/>
			     				<r:commandLinkCustom id="search" action="#{cancelMultipleReservationMB}" method="search" icon="icon-search" message="#{msg.searchButton}"/>
				     	 	</h:panelGrid>
				     	 	
				     	 	<p:blockUI block="userTable" trigger="userTable">  
						        #{msg.loading}<br />  
						        <p:graphicImage value="/images/ajax-loader.gif"/>  
						    </p:blockUI>
				     	 	<p:dataTable var="user" value="#{cancelMultipleReservationMB.userLazyDataModel}" 
				     	 		style="padding-top:15px" paginator="true" lazy="true" id="userTable"
				     	 		rows="10"
				     	 		paginatorPosition="bottom" emptyMessage="#{msg.noRecordsFound}">
				 
				 		 		<p:column headerText="#{msg.full_name}" style="width:30%">  
					            	<h:outputText value="#{user.getFullName()}" />   
				        		</p:column> 
				 
				 				<p:column headerText="#{msg.documentType}" style="width:7%">  
					            	<h:outputText value="#{cancelMultipleReservationMB.obtainDescription(user.documentType.description)}" />   
				        		</p:column> 
				        		
						        <p:column headerText="#{msg.documentNum}" style="width:20%" sortBy="#{user.dni}">  
					            	<h:outputText value="#{user.dni}" />   
				        		</p:column> 
				        		
				        		<p:column headerText="#{msg.email}" style="width:10%" >  
					            	<h:outputText value="#{user.getDefaultEmail().email}" />   
				        		</p:column>
				        		
				      			<p:column style="width:10%" headerText="#{msg.actions}">
				        		
				        			<div style="text-align: center">
				        				<p:commandButton value="#{msg.select}" update="@form" action="#{cancelMultipleReservationMB.setSelectedUser(user)}" oncomplete="wiz.next()"/>
				        			</div>
				        		</p:column>
				        		<p:column headerText="#{msg.observation}" style="width:20%">  
				        			<p:outputPanel rendered="#{user.block}">
				        				<div style="word-wrap: break-word;white-space:initial !important">#{user.blockMotive}</div>
				        			</p:outputPanel> 
				        		</p:column> 
						    </p:dataTable>
						</p:panel>
					
						<div style="text-align:right; margin-top:10px">
							<div style="display: inline;">	
								<p:commandLink update="@form" onclick="wiz.back();" styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-action">
									<span class="ui-button-text ui-c"><i class="icon-arrow-left"></i><r:space/><r:space/>#{msg.previous}</span>
								</p:commandLink>
							</div>
						</div>
					
					</p:tab>
					
					<p:tab id="confirmation" title="#{msg.confirmation}">
						<p:panel>
							<r:commonMultipleCancelationReservation manageBean="#{cancelMultipleReservationMB}"/>
						</p:panel>
						<div style="text-align:right; margin-top:10px">
							<div style="display: inline;">	
								<p:commandLink update="@form" onclick="wiz.back();" styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-action">
									<span class="ui-button-text ui-c"><i class="icon-arrow-left"></i><r:space/><r:space/>#{msg.previous}</span>
								</p:commandLink>
								<p:commandLink styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-action" action="#{cancelMultipleReservationMB.confirmCancelation()}">
									<span class="ui-button-text ui-c"><i class="icon-save"></i><r:space/><r:space/>#{msg.saveButton}</span>
								</p:commandLink>
							</div>
						</div>
					</p:tab>
				</p:wizard>
			</h:form>
			
		</ui:define>
	</ui:composition>
</h:body>
</html>
